<template>
  <div id="hot">
    <div class="content">
      <ul>
        <li v-for="i in list" :key="i.id">
          <div class="msg">
            <div class="left" @click="leap(i.id)"><img :src="i.img" alt="" /></div>
            <div class="middle">
              <div class="m-top">{{ i.nm }}</div>
              <div class="m-star">主演：{{ i.star }}</div>
              <div class="m-show">{{ i.showInfo }}</div>
            </div>
            <div class="right">
              <div class="r-score">{{ i.sc }}分</div>
              <div class="r-buy" @click="buy(i.id)" :style="{backgroundColor: i.showStateButton.color}">{{ i.showStateButton.content }}</div>
            </div>
          </div>
          <hr />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      movie: [],
      id: 0,
      // citys: citys
    };
  },
  props: {
    // citys: {
    //   type: String,
    //   default: "",
    // },
  },
  created() {
    this.getList();
    // this.getMovie();
  },
  methods: {
    async getList() {
      await this.axios
        .get("https://apis.netstart.cn/maoyan/index/movieOnInfoList")
        .then((re) => {
          console.log(re);
          this.list = re.data.movieList;
        });
    },
    async getMovie() {
      await this.axios
        .get("https://apis.netstart.cn/maoyan/movie/detail?movieId=" + this.id)
        .then((re) => {
          console.log(re);
          this.movie = re.data;
        });
    },
    buy(i) {
      console.log(i);
      // this.id = i;
      this.$router.push("/dMovie/"+ i);
    },
    leap(id) {
      this.$router.push("/film/"+ id);
    },
  },
};
</script>

<style scoped>
.content {
  margin-top: 10px;
}

.content ul li {
  padding: 0 10px;
}

.content ul li .msg {
  padding: 5px;
  display: flex;
  justify-content: space-between;
}

.content ul li:last-child .msg {
  margin-bottom: 50px;
}

img {
  width: 70px;
}

.middle {
  padding: 10px;
  padding-top: 0;
  width: 58%;
  color: grey;
  font-size: small;
}

hr {
  color: #aaa8a8;
}

.middle > div:nth-of-type(n + 2) {
  margin-top: 10px;
}

.middle .m-top {
  font-size: 25px;
  font-weight: 700;
  color: gray;
}

.middle .m-star {
  width: 220px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.right .r-score {
  color: orange;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.right .r-buy {
  width: 45px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: red;
  color: white;
  border-radius: 5px;
  font-size: smaller;
}
</style>